<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Netlify Blobs JSON CRUD</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
    .container { display: flex; flex-direction: column; gap: 20px; }
    .form-group { display: flex; flex-direction: column; gap: 5px; }
    textarea { height: 200px; font-family: monospace; }
    button { padding: 8px 16px; cursor: pointer; }
    .actions { display: flex; gap: 10px; }
  </style>
</head>
<body>
  <div class="container">
    <h1>JSON 文件管理 (Netlify Blobs)</h1>
    
    <div class="form-group">
      <label for="filename">文件名:</label>
      <input type="text" id="filename" placeholder="example.json">
    </div>
    
    <div class="form-group">
      <label for="jsonContent">JSON 内容:</label>
      <textarea id="jsonContent" placeholder='{"key": "value"}'></textarea>
    </div>
    
    <div class="actions">
      <button id="loadBtn">加载文件</button>
      <button id="saveBtn">保存文件</button>
      <button id="deleteBtn">删除文件</button>
    </div>
    
    <div id="message"></div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const filenameInput = document.getElementById('filename');
      const jsonContent = document.getElementById('jsonContent');
      const loadBtn = document.getElementById('loadBtn');
      const saveBtn = document.getElementById('saveBtn');
      const deleteBtn = document.getElementById('deleteBtn');
      const messageDiv = document.getElementById('message');
      
      // 加载文件
      loadBtn.addEventListener('click', async () => {
        const filename = filenameInput.value.trim();
        if (!filename) {
          showMessage('请输入文件名', 'error');
          return;
        }
        
        try {
          const response = await fetch(`/.netlify/functions/blobs-json/${filename}`);
          const data = await response.json();
          
          if (response.status === 404) {
            showMessage(data.message, 'error');
            jsonContent.value = '';
          } else {
            jsonContent.value = JSON.stringify(JSON.parse(data), null, 2);
            showMessage('文件加载成功', 'success');
          }
        } catch (error) {
          showMessage('加载文件失败: ' + error.message, 'error');
        }
      });
      
      // 保存文件
      saveBtn.addEventListener('click', async () => {
        const filename = filenameInput.value.trim();
        if (!filename) {
          showMessage('请输入文件名', 'error');
          return;
        }
        
        try {
          JSON.parse(jsonContent.value); // 验证 JSON 格式
          
          const response = await fetch(`/.netlify/functions/blobs-json`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              key: filename,
              value: JSON.parse(jsonContent.value)
            })
          });
          
          const data = await response.json();
          showMessage(data.message, 'success');
        } catch (error) {
          showMessage('保存文件失败: ' + error.message, 'error');
        }
      });
      
      // 删除文件
      deleteBtn.addEventListener('click', async () => {
        const filename = filenameInput.value.trim();
        if (!filename) {
          showMessage('请输入文件名', 'error');
          return;
        }
        
        try {
          const response = await fetch(`/.netlify/functions/blobs-json/${filename}`, {
            method: 'DELETE'
          });
          
          const data = await response.json();
          showMessage(data.message, 'success');
          jsonContent.value = '';
        } catch (error) {
          showMessage('删除文件失败: ' + error.message, 'error');
        }
      });
      
      function showMessage(text, type) {
        messageDiv.textContent = text;
        messageDiv.style.color = type === 'error' ? 'red' : 'green';
      }
    });
  </script>
</body>
</html>